Intro to CSS

CSS Selectors

Common CSS selectors explained

There are three main selector types and two sub category selector types. Every style falls into one of the three main selector types. The three main selector types are:

The two sub category selectors are:

Tag selector

A tag selector is a style that is named after an HTML tag. For example, if a style is named ‘h1’ then every instance of <h1> in the page will be affected by the style.

Class selector

A class selector has a name that is determined by the web designer. This name can be anything he or she wants. The style can be applied to any element or object in a web page. The style is not dependent on any particular HTML tag in the way the tag selector is. The style name in the style sheet is preceded with a full stop.

Id

Id means ‘identifier’. As with the class selector, the web designer determines the name and to what element or object to apply it to. The selector name in the style sheet is preceded with the hash symbol.

The difference between class and id selectors

Class and id selectors differ in one significant respect:

In both cases, any particular class or ID selector can be used across all pages in a web site.

The difference is to do with semantics, the meaning of what is being used.

It may be that a designer wishes to have a style for certain pieces of text to make it appear different from other text. This style may need to be used several times in a page, therefore it would be appropriate to create a class selector for the text.

An id selector can be used for an element to indicate that it is unique within the page. A typical use for an id selector would be for a layout element such as a wrapper <div>, a box that contains all the content for the page. This region is unlikely to be repeated within a page so therefore an id selector can be created to affect its appearance. This indicates to another person editing the page that this is the only time this style is used in the page and that the element it is applied to is unique.

Compound selectors

Compound selectors are styles whose name is made from one or more of the three main selector types, tag, class or id. These styles are used to target a specific element or object within a particular region in the page. A compound selector will ensure that other elements that are the same in other regions in the page will not be affected by the style.

For instance, a style could be written to change the appearance of text links within a part of the page without affecting their appearance elsewhere.

Pseudo class selectors

These are styles that determine a condition or state for the element or object being targeted. The pseudo part of the selector is preceded by colon. For instance, a link can be made to change in appearance when the mouse is over it. The pseudo class selector for this is a:hover.